Edit Options at Basket Page Edit Options at the basket (Modal pop up!)
If the website is currently NOT using ajax add to cart:
On the BASK page, add this if statement at the top: https://gist.github.com/mivajenn/6dc55c19faea01e95952
For the BASK page Javascript, click here. This will be placed in your mvscreen.js/custom.js file under BASK.
PRODUCT PAGE CHANGES
Check to see if the client is using alternative page displays for products. If they are, make either a Ready Theme content to call on each pages (instead of editOptions), or use toolkit to call a page. This way all the code for the “pop up” is in the same spot.
- Create an item with the code editOptions, and module of cmp-mv-content
- Assign the editOptions item to the PROD page.
- At the top of the PROD details, add the following if statement:
https://gist.github.com/mivajenn/67c5b775ad9ecfef6573
You can add more logic to see if they have selected an option for the add-on product, which will prevent them from checking out if they have not. Should also display an error message.
4. I n the editOptions tab, add the following code (this can vary depending on if the client wants it styled a certain way or not, or if they are not using bootstrap! Make sure you make the appropriate changes. This includes the ID of the price (price-value))
https://gist.github.com/mivajenn/c76da73e41a5c840bcc4
BASKET PAGE CHANGES
Basket Contents
- Look for the item:options array
- Right AFTER the foreach loop, add the following code:
https://gist.github.com/mivajenn/6c3d138363a1a48469b4
This is first checking to see if the basket item has options. If it does, the link will show. It is going to pass the following variables to your modal pop up:
– Product Code – Quantity currently in basket – The current basket line item (we need this to delete it)
Using Miva9’s Add-on Product with Attributes? Use the following (REQUIRES TOOLKIT):
https://gist.github.com/mivajenn/77de601abb7329c52690
3. You can change the “Edit Options” text, or add an icon (check out photodon.com’s basket optionchanger, it uses a cog).
4. Go to the Footer of the basket page and add your modal information needed (this could be a lightbox too).
Example: https://gist.github.com/mivajenn/00541d9362c5c83ebe88
Once you had added all the code/ components needed, test to make sure the following are happening:
Modal (or lightbox) is popping up with the correct product The correct options are showing (go to the product page to compare) Change the options, and make sure that the previous basket item is removed, and is now replaced with the new one (aka: the options changed).
Here are some examples: http://tguefen.mivamerchantdev.com/mm5/merchant.mvc?Screen=PROD&Store_Code=DTS&Product_Code=home-for-the-holidays-candle CLICK HERE
(Add it to cart and edit the options on the basket page — the Price varies with the size)
|