Skip to content

Remove workarounds and comments for previous blockers #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
+18 −23
Closed

Remove workarounds and comments for previous blockers #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 18 additions & 23 deletions public/campfire-commerce/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
// Fetch product data from JSON source
// blocked by https://github.com/lightpanda-io/browsercore/issues/187
// window.addEventListener("load", () => {

window.addEventListener("load", () => {
// use XHR to retrieve the product's infos.
const detailsXHR = new XMLHttpRequest();
// blocked by https://github.com/lightpanda-io/browsercore/issues/186
// detailsXHR.open('GET', 'json/product.json');
detailsXHR.open('GET', document.URL + 'json/product.json');
detailsXHR.open('GET', 'json/product.json');
detailsXHR.responseType = 'json';
detailsXHR.onload = function() {
if (this.status === 200) {
@@ -29,18 +25,16 @@ detailsXHR.open('GET', document.URL + 'json/product.json');
}
}());

// blocked by https://github.com/lightpanda-io/browsercore/issues/185
//
// var MenuItems = document.getElementById('MenuItems');
// MenuItems.style.maxHeight = '0px';
//
// function menutoggle() {
// if (MenuItems.style.maxHeight == '0px') {
// MenuItems.style.maxHeight = '200px';
// } else {
// MenuItems.style.maxHeight = '0px';
// }
// }
var MenuItems = document.getElementById('MenuItems');
MenuItems.style.maxHeight = '0px';

function menutoggle() {
if (MenuItems.style.maxHeight == '0px') {
MenuItems.style.maxHeight = '200px';
} else {
MenuItems.style.maxHeight = '0px';
}
}

var ProductImg = document.getElementById('product-image');
document.getElementById('small-product-image-1').onclick = function() {
@@ -49,16 +43,17 @@ detailsXHR.open('GET', document.URL + 'json/product.json');
document.getElementById('small-product-image-2').onclick = function() {
ProductImg.src = this.src;
};
// });
});



// Update product information in HTML elements
function updateProductInfo(product) {
// blocked by https://github.com/lightpanda-io/browsercore/issues/20
// document.getElementById('product-image').src = product.image;
// document.getElementById('small-product-image-1').src = product.image;
// document.getElementById('small-product-image-2').src = product.images[0];

document.getElementById('product-image').src = product.image;
document.getElementById('small-product-image-1').src = product.image;
document.getElementById('small-product-image-2').src = product.images[0];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fix doesn't really works.
If you remove the 3 following lines (which use the setAttribute) the images are not correctly updated.

expected

    <div class="col-2">
      <img id="product-image" src="images/nomad_000.jpg" alt="" width="100%">

      <div class="small-img-row">
        <div class="small-img-col">
          <img id="small-product-image-1" src="images/nomad_000.jpg" alt="" width="100%" class="small-img">
        </div>
        <div class="small-img-col">
          <img id="small-product-image-2" src="images/nomad_001.jpg" alt="" width="100%" class="small-img">
        </div>
      </div>

current

    <div class="col-2">
      <img id="product-image" src="" alt="" width="100%">

      <div class="small-img-row">
        <div class="small-img-col">
          <img id="small-product-image-1" src="" alt="" width="100%" class="small-img">
        </div>
        <div class="small-img-col">
          <img id="small-product-image-2" src="" alt="" width="100%" class="small-img">
        </div>
      </div>
    </div>


document.getElementById('product-image').setAttribute('src', product.image);
document.getElementById('small-product-image-1').setAttribute('src', product.image);
document.getElementById('small-product-image-2').setAttribute('src', product.images[0]);