Shopify Question posted in
The Shopify help center can be found here.

How to pass info from one html page to another – Shopify

first question here. I’m building a record store website in HTML5 where one page (store.html) displays all the albums and below each one there is a Buy Now button with a link to buy.html 

<div class="item goth rock folk cd">
<div class="card-izotop-img">
<img src="img/vinyl/wolfe_abyss.jpg" alt="Chelsea Wolfe - Abyss">
</div>
<div class="card-izotop-info">
<h6>Chelsea Wolfe - Abyss</h6>
<h5>€ 25</h5>                              
<a href="vinyl/buy.html">Buy Album</a>
</div>
</div>

The buy.html page will be common for all albums in this page. What I’m trying to do is somehow pass info from the album clicked (on store.html page) to the buy.html page. So if someone clicks on the above example he will get text saying: You want to buy “Chelsea Wolfe – Abyss” at “25” euros

while someone else who clicks on a different album will get that album’s info. Note that I’m not using a form, most answers I found here use forms as a solution.

Since this is an independent record store I want to avoid monthly fees and commissions to Shopify or Paypal etc so I’m trying a simple solution. If you can point me towards a direction I can find a way to work this out. Thank you

Tags:

3

Answers


  1. 0

    Well yes, the first option to pass information from one page to another will be a form.
    Because you don’t want to use that, there is a second method which is passing information as a query string in the URL you will be hitting.

    Syntax is as follows:
url?<query_string> where
query_string is parameter1=value1&parameter2=value2&... so on

Example:
<a href="vinyl/buy.html?albumId=Chelsea_Wolfe_Abyss&price=25">Buy Album</a>

    Point to keep in mind while using query string:
    While passing spaces or special characters, prefer encoding the values before passing them in URL.
    There is a JavaScript function encodeURIComponent() to encode them because spaces,etc can be unsafe when passed in URL directly.

    encodeURIComponent('Chelsea Wolfe - Abyss') will result in:
Chelsea%20Wolfe%20-%20Abyss
    Login or Signup to reply.
  2. 0

    I think you should use PHP+MYSQL to do it.
    You should:

    1. Place all data about albums to database
    2. Return data from database about albums you will show

    3. Show list of albums and links with record number parameter
      Fox example:

      <a href="vinyl/buy.php?a=1">Buy album</a>

      <a href="vinyl/buy.php?a=2">Buy album</a>

    4. Select a row from database with record number you get from URL.

    You will get the recond number using code $record_number=@$_GET[a];
    and use $record_number to select album info from database

    1. Show information about album you want to show
    Login or Signup to reply.
  3. 0

    What I’m trying to do is somehow pass info from the album clicked (on
    store.html page) to the buy.html page.

    If you are looking for an HTML5 solution, one approach is to use HTML5 localStorage.

    You can set name-value pairs in localStorage (which will remember them on every page across the site).

    When you want to retrieve the values, you can get them back from localStorage, and populate an object with them.

    From then on (on that page), you can interrogate the object.

    Example:

    var selectedAlbum = {};
var prices = document.querySelectorAll('.item a');


function selectAlbum() {
    var item = this.parentNode;

    localStorage.setItem('selectedAlbumTitle', item.getElementsByTagName('h2')[0].textContent);
    localStorage.setItem('selectedAlbumPrice', item.querySelector('.price').textContent);

    selectedAlbum.title = localStorage.getItem('selectedAlbumTitle');
    selectedAlbum.price = localStorage.getItem('selectedAlbumPrice');

    console.log('Title: ' + selectedAlbum.title);
    console.log('Price: ' + selectedAlbum.price);
}


for (var i = 0; i < prices.length; i++) {
    prices[i].addEventListener('click', selectAlbum, false);
}
    .item {
float: left;
width: 200px;
}

.item h2 {
font-size: 12px;
}

.item .price {
font-size: 24px;
font-weight: bold;
}

.item a:hover {
font-weight: bold;
cursor: pointer;
}
    <div class="item goth rock folk cd">
<div class="card-izotop-info">
<h2>Chelsea Wolfe - Abyss</h2>
<p class="price">&euro; 25</p>                              
<a>Buy Album</a>
</div>
</div>

<div class="item goth rock folk cd">
<div class="card-izotop-info">
<h2>King Dude - Burning Daylight</h2>
<p class="price">&euro; 20</p>                              
<a>Buy Album</a>
</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search