Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

Jane39

Members
 View Profile  See their activity

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Posts posted by Jane39

    Change Another Image On Link Hover

    in Effortless E-Commerce with PHP and MySQL

    Posted

    It's fine Hartley as I messed things up. I will keep looking around for the answer and let you know if I found one. 

     

    I just have one more question. In the php code mentioned above, is it possible to define the array "$color_palettes[$ii]" before the <td> tag (without changing the html output)? So that way I can use it in the src attributes of the .main class instead of within .toggles class only.

     

    Thanks

    Change Another Image On Link Hover

    in Effortless E-Commerce with PHP and MySQL

    Posted

    I pressed F12 (Ctrl+Shift+J) while I'm on the link page and found this.

     

    event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
    panel-1                                                 category.php?category=Dresses:75
     

     

    Is it the way of viewing the console in browser? This line (panel-1....) comes from another function that I'm using on a navigation bar. I'm placing it within the <body> tag and it's working.

     

    As I mentioned, hover function on ProductImage is working but on colors isn't working even I'm putting them in the same place (within the <head> tag as a link). 

     

    I hope this could tell you something. Otherwise, do you think there's something wrong in my php parts? Please let me know if there's anything I could do to trace the errors.

     

    Thanks Hartley.

    Change Another Image On Link Hover

    in Effortless E-Commerce with PHP and MySQL

    Posted

    I copied your example as above and replaced the current one in my javascript file but still see no errors in the browser.

     

    I think my problem is probably from php code. From select statement I posted in category.php section, you would see I created two columns related to colors; one is called "color_palette" and the other is "color_palettes" which is group concat by all "color_palette" of each product id. 

     

    Within .main class, each variable "$color_palette" I'm using in the src attributes is from column "color_palette". And within .toggles class, each array "$color_palettes[$ii]" in src attrbutes is from the other column, "color_palettes".  

     

    When I mouse over each color, the alternate image for each color doesn't show up because each $color_palettes[$ii] does not exist in .main class of the img tag I think. 

     

    Any ideas please?

    Change Another Image On Link Hover

    in Effortless E-Commerce with PHP and MySQL

    Posted

    This is generated HTML Hartley. I spaced them for an easier view.

     

    <table><tr>

    <td><div class="image">

        <a href="product.php?id=2&colorpalette=JJ2BGXX"><img class="main" data-alt-src="images/1431.JJ2BGXX.BR.jpg" src="images/1431.JJ2BGXX.FR.jpg" width="300" height="327" /></a><br />

        <div class="toggles">

            <a href="product.php?id=2&colorpalette=JJ169XX"><img data-src="images/1431.JJ169XX.FR.jpg" src="images/1431.JJ169XX.CP.jpg" /></a> 

            <a href="product.php?id=2&colorpalette=JJ2BGXX"><img data-src="images/1431.JJ2BGXX.FR.jpg" src="images/1431.JJ2BGXX.CP.jpg" /></a> 

        </div>

    </div></td>

     

    <td><div class="image">

        <a href="product.php?id=3&colorpalette=JJ2EUA0"><img class="main" data-alt-src="images/1791.JJ2EUA0.BR.jpg" src="images/1791.JJ2EUA0.FR.jpg" width="300" height="327" /></a><br />

        <div class="toggles"></div>

    </div></td>

     

    [same generated for product id 5]

     

    <td><div class="image">

        <a href="product.php?id=6&colorpalette=JJ8BSA4"><img class="main" data-alt-src="images/4867.JJ8BSA4.BR.jpg" src="images/4867.JJ8BSA4.FR.jpg" width="300" height="327" /></a><br />

        <div class="toggles"></div>

    </div></td>

    </tr><tr>

     

    [same generated for product id 7]

     

     <td><div class="image">

        <a href="product.php?id=8&colorpalette=JJFR4A1"><img class="main" data-alt-src="images/5375.JJFR4A1.BR.jpg" src="images/5375.JJFR4A1.FR.jpg" width="300" height="327" /></a><br />

        <div class="toggles">

            <a href="product.php?id=8&colorpalette=JJC88A2"><img data-src="images/5375.JJC88A2.FR.jpg" src="images/5375.JJC88A2.CP.jpg" /></a> 

            <a href="product.php?id=8&colorpalette=JJC50XX"><img data-src="images/5375.JJC50XX.FR.jpg" src="images/5375.JJC50XX.CP.jpg" /></a> 

            <a href="product.php?id=8&colorpalette=JJFR4A1"><img data-src="images/5375.JJFR4A1.FR.jpg" src="images/5375.JJFR4A1.CP.jpg" /></a> </div>

    </div></td>

    </tr></table>

    Change Another Image On Link Hover

    in Effortless E-Commerce with PHP and MySQL

    Posted

    Hartley, I will store the alternate image for each color later. I did have a column for images, but also when I tried to combine variables $style & $color to create names and links for images and it worked. So I thought I would go with it as that way i don't have to create another table for images. The alternate images and colors still work when I switched the code a little bit but somehow hover function on colors are not working.

     

    Here are my javascript.

     

    //Hover function on ProductImage

    var sourceSwap = function () {

        var $this = $(this);

        var newSource = $this.data('alt-src');

        $this.data('alt-src', $this.attr('src'));

        $this.attr('src', newSource);

    }

    $(function () {

        $('img.main').hover(sourceSwap, sourceSwap);

    });

     

    // Hover function on colors

     $('.image .toggles img').hover(function () {        

            var src = $(this).attr("data-src");

            var $main = $(this).closest(".image").find(".main");

            $main.attr("toggle", $main.attr("src")).attr("src", src);

        },

        function () {        

            var $main = $(this).closest(".image").find(".main");

            $main.attr("src", $main.attr("toggle"));

        });

    Change Another Image On Link Hover

    in Effortless E-Commerce with PHP and MySQL

    Posted

    Hi,

     

    My product page (output) in HTML is something like this:

     

    ProductImage1            ProductImage2          ProductImage3            ProductImage4

    Color1  Color2             Color3  Color4                                                  Color2  Color5  Color6

     

    What I'm trying to do is when I hover my mouse over any color above, an original (main) image of ProductImage will switch to another image (to match the hovered color). And that original image will be back when the mouse leaves. 

    Example: http://jsfiddle.net/4dK2x/27/

     

    I also added another hover function on ProductImage for switching images between front view and back view and it's working well. (You would see the two src attributes of the .main class image in my php code as follows)

     

    However, the hover function on colors is not working when I run php code to create a dynamic list. 

     

    Here are my category.php.

    ----

    $sql = mysqli_query($db_connect, "SELECT p.id,p.style,c.color_palette, GROUP_CONCAT(DISTINCT CONCAT(c.color_palette) ORDER BY p.id SEPARATOR '+') color_palettes FROM product_details AS pd INNER JOIN products AS p ON p.id=pd.product_id INNER JOIN colors AS c ON c.id=pd.color_id INNER JOIN subcategories AS sub ON sub.id=p.subcategory_id INNER JOIN categories AS cat ON cat.id=sub.category_id WHERE category='$category' GROUP BY p.id LIMIT 6");

    [...]
    $i= 0;
    $Output= '<table><tr>'; 
    while($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)){
       $id = $row["id"];
       $color_palette = $row["color_palette"];
       $style = $row["style"];
       $color_palettes = explode("+", $row["color_palettes"]);
       

       $Output.= '<td><div class="image"><a href="product.php?id='.$id .'&colorpalette='.$color_palette.'"><img class="main" data-alt-src="images/'.$style.'.'.$color_palette.'.BR.jpg" src="images/'.$style.'.'.$color_palette.'.FR.jpg" width="300" height="327"/></a><br />';

       $Output.= '<div class="toggles">';
       for ($ii=0;$ii<count($color_palettes);$ii++){

       if (count($color_palettes) > 1) {
       $Output.= '<a href="product.php?id='.$id .'&colorpalette='.$color_palettes[$ii].'"><img data-src="images/'.$style.'.'.$color_palettes[$ii].'.FR.jpg" src="images/'.$style.'.'.$color_palettes[$ii].'.CP.jpg" /></a> ';

       } else {
          $Output.= '';}
       } // End for loop
       $Output.= '</div>';
       $Output.='</div></td>';
    $i++;
    if ($i%4==0){
    $Output.= '</tr><tr>';}
    } // End while loop
    $Output.= '</tr></table>';

    ----

     

    I think my problem is probably because the array $color_palettes[$ii] is not defined in .main class image. So if that i the case, what do I do to fix it?

     

    Any help would be much appreciated.

    Dropdown Menus Of Available Sizes And Colors With Php/mysql

    in Effortless E-Commerce with PHP and MySQL

    Posted

    I totally agreed with you about the DB design Hartley and I think I did the same thing. Here are how my tables look like.

     

     

    tblProducts                   tblSizes      tblColors       tblImages              tblSpecific_Products

    id                                     id                 id                    id                             id        

    product_name                 size              color               image                      product_id  (FK)                                            

    style_code                                                                                                 size_id (FK)

    price                                                                                                          color_id (FK)

                                                                                                                      image_id (FK)

                                                                                                                

    My question is how do I display all available colors on the general products page as you mentioned? See a sample picture of a product page for what I mean here. http://s12.postimg.org/l8s0zh4d9/product_page_sample.png.

     

    Thanks Hartley.

    Dropdown Menus Of Available Sizes And Colors With Php/mysql

    in Effortless E-Commerce with PHP and MySQL

    Posted

    Hi Hartley,

     

    Regarding step 1 as you mentioned, I tried but still couldn't get all available colors to display on the product page. 

     

    How do I have those colors in colors table to display on the product page? Do I have to create another attribute table for colors and products tables?  Right now I have products table, colors table, sizes table, images table and specific_products table (product_id FK, color_id FK, size_id FK, image_id FK).

     

    What I've done now is I had all items displayed on the page. Each item has a default (front-view) image and a hidden (back-view) image. So when users hover their mouses over any default image, the hidden one will be showed. 

     

    Thanks.

    Mysqli_Num_Rows() Expects Parameter 1 To Be Mysqli_Result, Boolean Given Array

    in Effortless E-Commerce with PHP and MySQL

    Posted

    I'm running PHP files of example 2 from my computer and I got those following errors across pages.

     

    An error occurred in script 'D:\XAMPP\htdocs\ex2\html\views\home.html' on line 14:
    mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given
    Array

     

    An error occurred in script 'D:\XAMPP\htdocs\ex2\html\shop.php' on line 32:
    mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given
    Array

     

    An error occurred in script 'D:\XAMPP\htdocs\ex2\html\sales.php' on line 20:
    mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given
    Array

     

    An error occurred in script 'D:\XAMPP\htdocs\ex2\html\wishlist.php' on line 80:
    mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given
    Array

     

    An error occurred in script 'D:\XAMPP\htdocs\ex2\html\cart.php' on line 81:
    mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given
    Array

     

    Can someone please tell me how to fix it? Thanks.

    Dropdown Menus Of Available Sizes And Colors With Php/mysql

    in Effortless E-Commerce with PHP and MySQL

    Posted

    Hi HartleySan,

     

    Thank you for your clarification, I have a better understanding of how it's like now.

     

    Regarding your question, I want users to select a color first (if color options are > 1), then they will click on a dropdown list to select a size available for that color. While unavailable sizes are seen by users, they aren't clickable.

     

    As for product images, I will create one separate table for them as you suggested. 

     

    Here are my php codes for fetching records from database and echoing them to the page. 

     

           $sql = mysqli_query($con, "SELECT sp.id, p.product_name,p.style,s.size,c.color,p.price,p.image,CONCAT(p.style,'-',sp.id) AS sku, sp.stock FROM specific_products as sp INNER JOIN sizes AS s ON s.id=sp.size_id INNER JOIN colors AS c ON c.id=sp.color_id INNER JOIN products AS p ON p.id=sp.product_id WHERE p.id='$id' AND stock>0 ORDER BY p.date_created ASC");

          $product_id_count = mysqli_num_rows($sql); 
           if ($product_id_count > 0) {
                   while($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)){ 
                           $product_name = $row["product_name"];
                           $style = $row["style"];
                           $image = $row["image"];
                           $price = $row["price"];
                           $stock = $row["stock"];
                           $size .= "<option value='{$row['sku']}'"; 
                                     if ($sku == $row['sku'])
                                            $size .= "selected='selected'";
                                            $size .=">{$row['size']}</option>";
                                     if ($sku == $row['sku'])
                                            $color .= "selected='selected'";
                                            $color .=">{$row['color']}</option>";
                    }
            } 
     
    I've got two errors as follows:
    Notice: Undefined variable: size in D:\XAMPP\htdocs\ECommerceSite\product.php on line 28

    Notice: Undefined variable: color in D:\XAMPP\htdocs\ECommerceSite\product.php on line 32

     

    I know my codes look terrible but I'm trying to learn more. Thanks.

    Dropdown Menus Of Available Sizes And Colors With Php/mysql

    in Effortless E-Commerce with PHP and MySQL

    Posted

    Hi everyone,

     

    I'm building my own shopping website. I haven't figured out how to populate two dropdown lists with available sizes and colors of a product_id from database. 

     

    Here is the result I've got from querying database.

     

    id     product_name     style      size    color      price        image     sku          stock

    1      Neck Top            104       S        White     $30.00     104.jpg    104-1           5

    2      Neck Top            104       S        Black     $30.00     104.jpg    104-2            5

    3      Neck Top            104       M       Red        $30.00     104.jpg    104-3          10

    4      Neck Top            104       L        Blue       $30.00     104.jpg    104-4          10

    5      Neck Top            104       XL      Black      $30.00     104.jpg    104-5           5

     

    And here are my tables:

     

    tblProduct                      tblSizes      tblColors       tblSpecific_Products

    id                                     id                 id                     id        

    product_name                 size              color                product_id                                                          

    style                                                                            size_id

    price                                                                            color_id

    image                                                                          stock

    category (tops,dresses,bottoms,...)

    subcategory (bodycon,work,evening,cocktail)

                    

    Is there any way I can have it done without duplicating the values in each dropdown list? Also for each product_id, how can I store 3 different images (front view,back view and side view) for each color? Does it mean I have to create another attribute table for those images and store their names in database? I'm confused. 

×
×
  • Create New...