Modal attribute input

[tynov17]

Hi there,

I am very new to Miva templates, so please forgive my ignorance. I am using the Base ReadyTheme.

I am hoping to edit my template so that for one of my product attributes there is a bootstrap modal that pops up, rather than a dropdown list.


The reasoning being that I sell products which are highly customizable - in this case they can be monogrammed with 200+ different characters.


On my current site the workflow is as follows:
I have a link saying "click here to view options" and the user has to view the monogramming options in a separate window, remember the code associated with the monogram they want, and return to the product page to enter that code. They also have to enter the price associated with the monogram they selected. This is obviously a hassle for both the customer and myself, as there are often mistakes made.


I would love it if instead of leaving the product page, the customer could see "Monogram:" and rather than a dropdown list, it could be a modal element that pops up on screen and features radio buttons, where they can select their monogram and hit "submit". Then the attribute they chose is selected within the product page, the price is updated, etc, just like with any other input option.

Basically what it boils down to, is I want to take the current radio-button functionality of Miva, but have it be incorporated within a modal, rather than on the product page itself (200+ monogram options listed on the product page would be overkill).


I've mocked up something using html just to show you what I mean:

Modal before click: http://i.imgur.com/bI8gkJJ.jpg
Modal after click: http://i.imgur.com/S40ou1c.jpg



Is anything like this possible?


Thanks!

-T

[Ron Frigon]

Re: Modal attribute input

I've played around with this functionality quite a bit. I found that some versions of Safari on IOS don't play nice with Modal pop-ups. The screen would scroll behind the modal, instead of the modal content scrolling. This was a known bug, may have been fixed by now.

Anyway... I've opted to use accordions instead. Works really well and serves the same function, more or less.

So what you're looking for is possible, but you need to edit the PROD > Product Attribute Template and add some conditionals to check for your attribute code, then write the code for the modal or accordion. You'll also need to test again at the end to close it.

Something like this:

<mvt:foreach iterator="attribute" array="attributes">
  
  <!-- Opening modal code goes here -->  
  <mvt:if expr="l.settings:attribute:code EQ 'your-code'">
    <div>
  </mvt:if>
  
  All the template code... 
  
  <!-- Closing modal code goes here -->
  <mvt:if expr="l.settings:attribute:code EQ 'your-code'">
    </div>
  </mvt:if>  
  
</mvt:foreach>

Here's an example using a lot of conditionals and custom code for different functions in the attribute template: http://www.gpencil.com/product/PAINTED.php

Hope this helps point you in the right direction.