How do I start making something like the URL specified?

Hi,

I have to make something like this:
https://en.matthewcookson.com/prod/customslipper/custom/5369-grey

Can someone please point me in the right direction on how to achieve this ?

Thanks.

GET is a protocol to retrieve variables from a url, such as the following: localhost:/index.php?foo=bar where foo would equal bar. Something called mod rewrite (an .htaccess file) is rewriting an url to make it more friendly. Please research and fully understand $_GET before trying to tackle mod rewrite.

Hi,

Sorry for not making myself clear. I want to know how to make the thing happening in that webpage. For eg. it lets you select 3 different colours and the shoe on the left changes accordingly. How to make it ?

Thanks.

You can use $_SERVER[ ‘REQUEST_URI’ ] to get all the information from the URI to set whatever needs to be set in your PHP script to show the desired product. You can of course use $_GET like K. Wolfe suggested but I personally prefer adding variables to the URI where possible.

Here’s an article on sitepoint.com that I think you might find useful:http://www.sitepoint.com/guide-url-rewriting/.

Hi,

I am not refering to URL mod-rewrite. I am referring to the custom shoe design thing. Please check the attached screenshot.

Thanks.

Whew! I think a lot of work went into that.
The page has

<div class='slipper-preview' id='slipper_preview'>
<div class='image'>
<div class='spinner'></div>
<canvas height='629' id='slipper_canvas' width='939'></canvas>
</div>
<p class='price'>
<span class='amount'>400</span>
€
</p>
</div>

and it seems it’s changing involves https://en.matthewcookson.com/assets/application-47f5975bed9a8d4c5a0cd1a8d0759cd6.js

Hi,

So you mean to say that colour changing is not done using PHP ?

Thanks.

I would have guessed it was done using a whole bunch of images - and a big bunch at that, but looking (quickly) it seems to be javascript working with “canvas”.

I agree. That’s using preloaded images and clicking of the colour block calls up the associated image and uses JS to display the relevant image within the HTML. There is nothing PHP about this technique at all.

@Tapan; to easily see for yourself, try the page with javascript turned off. You’ll see the “choices menues” but no example images.

I worked on a similar project to this recently. We built it using a large amount of JavaScript. We basic just had a click event bound to each of the thumbnails that changed, among other things, the larger image by using a data attribute on the thumbnail that referenced the bigger image.

Yes i can because i did the Matthew Cookson customisation.
You can contact us

Best Regards
Max