Embed an article page

Good morning,

I would like to integrate 9 items with an order button into my Online Store menu and add them to the shopping cart.

I’m a newbie and I don’t know how to integrate this?

Here is my link to my source: https://codepen.io/aaashpnt-the-sans/pen/eYaEGPO

Can you help me?

Thank you for your help.

It’s not really enough information to give an informed answer.
Are you using some kind of Ecommerce system here?

I’m trying to make a small online store myself with 9 products
and I would just like to integrate a page with 9 articles into my online store menu.

I would like to integrate this type into my page: https://www.youtube.com/watch?v=Qc-LFzxoU6Q

and when I click on buy and add it to the cart with two close buttons and a checkout.

First some questions.
Will it always be just 9 products? Or are you likely to ever expand to 15, 50, 100 or 1000 products?
Is it just the slider of products you want like in the video, or will you want individual prodct pages too?
I have not time to watch the whole video, but I guess that is showing how they did the slider. It’s not just going to be server-side PHP, that is mostly client-side HTML/CSS/JS. PHP will just dish out bits of HTML for each item from however you are storing the product info.
How you store the product info will depend on the above questions; if you don’t already have that sorted.

there will only be 9 products no more.

All products will be on the same page.

The problem is that I don’t know how to integrate it, I manage and tinker, I’m a novice

Have a look at Stripe Checkout. https://stripe.com/payments/checkout

You can build your layout manually with HTML/CSS/JS and simply add buy now buttons to each item. This means that if you ever need to add new products, you will need to manually add them into the page with code. But it will get you up and running quick. In the future, if you see a need, you can the site to use a full-blown CMS that could make managing products easier.

1 Like

If that is the case and there will be no significant expansion of the product range then you probably don’t need to get into using a database.
Instead you could, as Joe says, manually code the product slider in HTML without a lot of PHP, adding the CSS for styling and JS for interactivity.
Alternatively if you wish to partially automate the rendering of the slider, you could store product info as an array of objects (either JSON or PHP) and have the slider generated from that. Which may be more difficult to initially set up, but will make for less work if you do end up changing the product range in the future.

Where you will need the server-side is managing the basket and checkout. But that’s a separate concern from initially creating the product slider which is more of a client-side thing. So take it one step at a time. But again, having a single record of product data in one place will help with managing both parts and reduce repetition sice they need access to the same data.

I found what I need but I don’t really know how to integrate it into my Online Store menu page.

my current page https://codepen.io/aaashpnt-the-sans/pen/eYaEGPO

and I would like to integrate just the items and the basket that I found here https://github.com/ProgrammingInsider/add-to-shopping-cart

Can you help me integrate this page into mine?

Thank you for your help

That code on github is based on Javascript, there is no PHP so I’ll move this to the JS forum.

That’s exactly what items.js is, a JSON array of product data. So you could begin by editing that to your product info.

1 Like

indeed sorry I didn’t pay attention to being on the right forum in js

Thank you

There are lots of pre-built “carousel sliders” available online, like Owl Slider etc. They usually have instructions for how you can add them to your web page. Before doing so, though, read up on the pros and cons of this sort of layout. I’ve read stats that suggest people don’t like sliders and that they don’t use them. There are nicer ways to lay out products, such as in a nice clear grid so that people can scroll naturally and view the products easily. Don’t just choose a slider because you think it’s cool etc. They’re actually awful.

4 Likes

Thank you for your information.

I am looking for an existing model to integrate into my page and easy to integrate because I don’t have many articles.

I would argue that’s a reason NOT to use a slider.

If you have few entries to link, you want all of the entries visible and… for lack of a better term… filling space. You dont want to hide the articles you do have inside a slider.

1 Like

Good evening,

I tried to integrate the articles into my menu page and it works.

On the other hand, I see that in the cards the price is not displayed and the shopping cart is only visible if I pass over it.

my code https://codepen.io/aaashpnt-the-sans/pen/eYaEGPO

Here’s what I should see:

and here is the result I have: