#1 2016-10-31 19:18:02

From: Juiz de Fora / Brazil
Registered: 2015-06-08
Posts: 40

Product page as an ecommerce

I'd like to create a product page where the user can select the color of the product. The page will be just one page and, each color will be a different product (the same product with different colors). So, when the user click in a color, the same page should be reloaded with pictures of the product related with the selected color.

What I thought:
- Create a page and one article for each product-color. But when a user click in one color link, the URL is different. Is this possible in Ionize?


Frederico Marinho - Social Media and Web Developer


#2 2016-11-01 01:27:34

Registered: 2014-03-07
Posts: 183

Re: Product page as an ecommerce


Personally I wouldn't create a page and one article for each colour, what you need to do is just have one page and one article that has all the different colour versions.  A few ways you could do this, depending on how complicated or simple you want it to be.

This is an example that may suit your needs, in ionize I would upload all the different image colour types, logically you could have image 1 as blue, image 2 as red, image 3 as green etc, or you could even use the image attributes to load appropriate colour if you don't want to do it by numbers and target image title instead.

On page load have the images load as a json, you can have the tags build out the structure inline on the page as a script. you than have the default image load whatever you want that to be and if a user clicks on different colours you just load the different path directly from json using js click event.

Feel free to ask me more questions if you need further help on this.



What's Ionize ?

Ionize is an Open Source Content Management System created by webdesigners for webdesigners.

Created and maintained by Partikule and Toopixel, Ionize wants to be the easiest and most powerful CMS.

Can I help ?

Because talent is nothing without involvement, we are looking for motivated coders and webdesigners to join the project team.


Website : ionizecms.com
Documentation : doc.ionizecms.com

Development : Ionize on GitHub
Translations : Ionize Translations