How can I display form data on a product cart page using PHP+Laravel/React js?

[rushikesh93]

Hello,

im learning create shopify custom app using PHP+Laravel/React js,
i have created one form that have some fields, but now i dont know to,
if form has a submit some data then that data will display to product cart page of shopify store,
please advise me that, how we can do that? or suggest me some wau, so i can follow that,

thanks in advanced.

[rushikesh93 · Accepted solution]

please help me with this. how can I achieve this? I want to know which method I follow for that.

I have done lots of Google but have not gotten any proper solution. How can I save data and display it on the cart page?

should I use API or anything else? and if I need to use API, how can I write in React JS.
- App Development in PHP(Base code : Laravel/React JS).

[rushikesh93]

i have updated my new code

this is my component file. there I have passed handleSubmit , now I don't get any data in this,
please help me on this.

import {gql, useQuery} from '@apollo/client';
import {Banner} from '@shopify/polaris';
import React from 'react';
import {Component} from 'react';
import ReactDOM from 'react-dom';
import {Loading} from '@shopify/app-bridge-react';
import app from "/css/app.css";
import { useReducer, useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
import {Provider, useAppBridge} from '@shopify/app-bridge-react';

function WhatsappSharecart() {

const [wp_enable, setWpEnable] = useState("No");
const [buttonlabel, setButtonlabel] = useState("Share on WhatsApp");
const [cartmessage, setCartmessage] = useState("Hey! There Watch My Cart.");
const [buttonposition, setButtonposition] = useState("Default");

const [bitlyenable, setBitlyenable] = useState("No");
const [bit_token, setBitToken] = useState("Enter Bitly Access Token");

const handleChange = (event) => {
setWpEnable(event.target.value);
setButtonposition(event.target.value);

setBitlyenable(event.target.value);
}

/*const handleSubmit = event => {
event.preventDefault();
alert(`Whatsapp Share Cart Enable: ${wp_enable}`)
alert(`Button Label Is: ${buttonlabel}`)
alert(`Cart Message on Whatsapp Share Link Is: ${cartmessage}`)
alert(`Whatsapp Button Position on Cart Page Is: ${buttonposition}`)
console.log(buttonlabel);
}*/

const handleSubmit = event =>{
event.preventDefault();

const data = {
wp_enable: wp_enable,
buttonlabel: buttonlabel,
cartmessage: cartmessage,
buttonposition: buttonposition,
bitlyenable: bitlyenable,
bit_token: bit_token

}

axios.post('/', data)
.then((response) => {
console.log(response .data)
}).catch((error) => {
console.log(error)
});
}

const handleAlternate = event => {
event.preventDefault();
alert(`Bitly Short URL Enable: ${bitlyenable}`)
alert(`Bitly Generic Access Token: ${bit_token}`)
}

return (
<div className="wp_share_cart">
<h1>General Configuration</h1>
<form onSubmit={handleSubmit}>
<fieldset>

<label>
<p>Whatsapp Share Cart Enable</p>
<select value={wp_enable} onChange={handleChange}>
{/*<option value="">--Please choose an option--</option>*/}
<option value="Yes">Yes</option>
<option value="No"> No </option>
</select>
</label>

<label>
<p>Button Label Text</p>
<input type="text"
value={buttonlabel}
onChange={(e) => setButtonlabel(e.target.value)}
name="wp_share_cart_label"/>
</label>

<label>
<p>Cart Message on Whatsapp Share Link</p>
<textarea value={cartmessage} onChange={(e) => setCartmessage(e.target.value)} />
</label>

<label>
<p>Whatsapp Button Position on Cart Page</p>
<select value={buttonposition} onChange={(e) => setButtonposition(e.target.value)}>
{/*<option value="">--Please choose an option--</option>*/}
<option value="Default"> Dafault </option>
<option value="Left"> Left </option>
<option value="Center"> Center </option>
<option value="Right"> Right </option>
</select>
</label>

</fieldset>
<button type="submit">Save Configuration</button>

<h1>Enable Bitly Short URL Settings</h1>
<fieldset>

<label>
<p>Bitly Short URL Enable</p>
<select value={bitlyenable} onChange={handleChange}>
{/*<option value="">--Please choose an option--</option>*/}
<option value="Yes">Yes</option>
<option value="No"> No </option>
</select>
</label>

<label>
<p>Bitly Generic Access Token</p>
<textarea value={bit_token} onChange={(e) => setToken(e.target.value)} />
</label>

</fieldset>
<button type="submit" onClick={handleAlternate}> Save Configuration</button>

</form>
</div>
)
}
export default WhatsappSharecart;

***********************************************

Route:

Route::post('/','InsertwpdataController@wp_share_cart');

***********************************************

Controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class InsertwpdataController extends Controller
{
public function index()
{
return view('products');
}

public function wp_share_cart(Request $request)
{
dd('test132');
/*$wp_enable = $request->input('wp_enable')
$buttonlabel = $request->input('buttonlabel')
$cartmessage = $request->input('cartmessage')
$buttonposition = $request->input('buttonposition')

$bitlyenable = $request->input('bitlyenable')
$bit_token = $request->input('bit_token');*/
}
}