Question

I’m trying to have functionality where you can click on the, “MAKE IT MY STORE,” link and it saves the content of the li based on the id and will pull the content of the li onto another page.

This code:

<li><xsl:attribute name="id">store-<xsl:value-of select="@id"/></xsl:attribute></li>

outputs to

<li id="store-1075"></li> 

and the number 1075 represented by, “@id,” changes based on each store location and there are multiple locations.

The li in this section auto-generates any store locations added in the backend. So on the frontend it currently displays more than one list item store location.

<ul id="storeList">
    <xsl:for-each select="$currentPage/* [@isDoc]">
      <xsl:sort select="@nodeName" order="ascending" />
        <li>
          <xsl:attribute name="id">store-<xsl:value-of select="@id"/></xsl:attribute>

            <a href="{umbraco.library:NiceUrl(@id)}">
                <img class="location-image" alt="">
                    <xsl:attribute name="src">
                        <xsl:value-of select="storeImage"/>
                    </xsl:attribute>
                </img>
            </a>

           <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:value-of select="location"/>
            </a>

            <p><xsl:value-of select="./address"/></p>
            <p><xsl:value-of select="./addressCity"/></p>

            <div class="makeMyStoreWrapper"><a class="makeMyStore" href="#"><xsl:attribute name="id">store-<xsl:value-of select="@id"/></xsl:attribute>MAKE IT MY STORE</a></div>

        </li>
    </xsl:for-each>
</ul>

Right now I have it setup to save the state of the, ul id=”storeList” when clicked using localStorage.setItem. And then any time the id of #storeList appears in the code it will pull in whatever value was saved to localStorage as seen below:

$(function() {

var save = $('#storeList').get(0);

$(save).click(function() {
localStorage.setItem('saved', this.innerHTML);

});


if ( localStorage.getItem('saved') ) {
save.innerHTML = localStorage.getItem('saved');

}

Obviously this is not what I want it to do. Instead I want it to save the content of each individual li clicked. I want the code to be something like this:

var id = any of the store ids or the specific ids, whatever works better.
var save = document.getElementById('store'+id);

or maybe var id equals an array of all the possible store id numbers.

The main purpose is a store locator page where you can click on one or more of the stores and save them to your, “My Store,” page. I almost have it working but I’ve hit a wall. Any help would be awesome and let me know if there is anything I need to clarify. I don’t ever work with ASP so this is tricky for me and this is my first time doing any jQuery or javascript from scratch. I originally tried using it with cookies but decided to use localStorage instead since there is no user login.

Answer 1

I just finished a similar type project, hopefully this will get you in the right direction

Inside the document ready function:

$('.store').on('click', function () { // something with the class store clicked
    var storeStorageKey = $(this).attr('id'); // store id of the item 

        $(this).data('value', 1); // use of html5 data values on the html line helped alot, just settin static right now
 //set in local storage so refreshing the page remembers what youve clicked
        localStorage.setItem(storeStorageKey, $(this).data('value'));
 });

Now you can have a collection you can access via store ids, although it might be better to store the entire local storage value as a JSON object to iterate thru, whichever you prefer

Heres a link to my project javascript that used local storage if you would like reference https://github.com/Jrizzi1/ND-mSummit-bingo/blob/master/js/script.js