Knowledgebase: Tips and Tricks
Edit options at the basket page
Posted by Wayne Smith on 22 April 2015 10:25 AM

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. 

  1. Create an item with the code editOptions, and module of cmp-mv-content
  2. Assign the editOptions item to the PROD page.
  3. 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

  1. Look for the item:options array
  2. 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)



Attachments 
 
 edit options at basket page.pdf (114.66 KB)
(0 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments:
CAPTCHA Verification 
 
Please enter the text you see in the image into the textbox below. This is required to prevent automated registrations and form submissions.

Help Desk Software by Kayako support.miva.com/supportsuite/index.php?